<template>
  <div>
    <a-tabs type="card" @change="onGroupTabChange">
      <a-tab-pane v-for="item in source" :key="item.id">
        <a-badge slot="tab" :count="item.count" :showZero="true" :offset="[10, -6]">
          <div>
            {{ item.name }}
          </div>
        </a-badge>
        <div class="sub-tab">
          <a-tabs @change="onTypeTabChange">
            <a-tab-pane v-for="subItem in item.noticeTypeList" :key="subItem.id || 'all'">
              <span slot="tab">{{ `${subItem.name}(${subItem.count})` }}</span>
            </a-tab-pane>
          </a-tabs>
        </div>
      </a-tab-pane>
    </a-tabs>
    <div v-if="noticeList.length > 0">
      <div
        v-for="item in noticeList"
        :key="item.id"
        class="mb12"
        style="display: flex; align-items: center; cursor: pointer"
        @click="goDetail(item)"
      >
        <a-tooltip :title="item.title">
          <div class="notice-title">{{ item.title }}</div>
        </a-tooltip>
        <div>
          <a-tooltip :title="item.content">
            <div class="notice-content">{{ item.content }}</div>
          </a-tooltip>
          <div class="mt8 fs12" style="height: 20px; line-height: 20px; color: rgba(166, 168, 180, 1)">
            <img src="./bank.png" style="height: 16px; height: 16px; margin-right: 4px; display: inline-block" />
            {{ item.companyName }}
          </div>
        </div>
        <div class="fs12" style="color: rgba(166, 168, 180, 1)">{{ formatDateAll(item.gmtCreate) }}</div>
      </div>
    </div>
    <a-empty v-else class="pb24"></a-empty>
    <div
      class="ta-center"
      style="
        color: rgba(166, 168, 180, 1);
        border-top: 1px solid #e8e8e8;
        height: 48px;
        line-height: 48px;
        cursor: pointer;
        margin: 0 -24px -24px -24px;
      "
      @click="goMore"
    >
      查看更多事项
      <a-icon type="right" class="ml4" />
    </div>
  </div>
</template>
<script>
import { userNoticesReq } from "./api";
import { formatDateAll } from "@/utils";
export default {
  name: "",
  components: {},
  mixins: [],
  props: {
    source: {
      type: Array,
      default: () => []
    },
    companyIds: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      groupId: null,
      noticeList: []
    };
  },
  computed: {},
  watch: {},
  created() {},
  mounted() {
    this.onGroupTabChange(this.source[0].id);
  },
  methods: {
    gotoPath(type, title) {
      switch (type) {
        case "turnOfficial":
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "2" }
          });
          break;
        case "preTransfer":
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "5" }
          });
          break;
        case "preResign":
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "3" }
          });
          break;
        case "resign":
          this.$router.push({
            path: "/staff/employee"
          });
          break;
        case "salaryCardChange":
          this.$router.push({
            path: "/staff/employee"
          });
          break;
        case "preInduction":
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "1" }
          });
          break;
        case "induction":
          this.$router.push({
            path: "/staff/manger", // 员工异动
            query: { selectId: "2" }
          });
          break;
        case "increment":
          this.$router.push({
            path: "/shebao/shebaoManage" // 员工异动
          });
          var that = this;
          setTimeout(function () {
            that.$router.push({
              path: "/shebao/shebaoManage/shebaoZengJianY"
            });
          }, 700);
          break;
        case "approval":
          this.$router.push({
            path: "/approval/list"
          });
          break;
        case "contractExpires":
          this.$router.push({
            path: "/contract/elecontract"
          });
          break;
        case "defaultTransferAccounts":
          if (title === "审批抄送通知") {
            this.$router.push({
              path: "/paySalary/examine?changeKey=4"
            });
          } else {
            this.$router.push({
              path: "/paySalary/examine?changeKey=1"
            });
          }
          break;
      }
    },
    goMore() {
      this.$router.push("/notice");
    },
    async goDetail(item) {
      if (this.companyIds.includes(item.subjectId)) {
        const company = await this.$store.dispatch("hr/findCompanyItem", item.subjectId);
        const comyName = company ? company.name : null;
        // 保存用工单位信息
        this.$store.dispatch("onCompanyClick", {
          id: item.subjectId,
          name: comyName
        });
        if (item.toUrl) {
          this.$router.push(item.toUrl);
        } else {
          if (item.subjectId === "defaultTransferAccounts") {
            this.gotoPath(item.subjectId, item.title);
          } else {
            this.gotoPath(item.noticeTypeCode);
          }
        }
      } else {
        this.$message.warning("您没有权限查看该事项");
      }
    },
    formatDateAll,
    onGroupTabChange(gId) {
      this.groupId = gId;
      this.onTypeTabChange("all");
    },
    onTypeTabChange(tId) {
      this.loadList(tId);
    },
    loadList(tId) {
      userNoticesReq({
        moduleType: "hr",
        noticeTypeId: tId === "all" ? null : tId,
        groupId: this.groupId,
        pageSize: 5
      })
        .then((res) => {
          this.noticeList = res.data.entities;
        })
        .catch((err) => {
          console.log(err);
        });
    }
  }
};
</script>
<style lang="scss" scoped>
.notice-title {
  width: 72px;
  height: 24px;
  line-height: 24px;
  padding: 0 8px;
  background: var(--primary10);
  color: var(--primary);
  font-size: 12px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 12px;
  border-radius: 2px;
}
.notice-content {
  width: 360px;
  height: 20px;
  line-height: 20px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  margin-right: 24px;
}

::v-deep .ant-tabs.ant-tabs-card .ant-tabs-card-bar .ant-tabs-tab {
  height: 30px;
  margin-top: 10px;
  line-height: 28px;
}
::v-deep .ant-badge-count {
  height: 16px;
  min-width: 16px;
  line-height: 16px;
  padding: 0 4px;
}
.sub-tab {
  ::v-deep .ant-tabs-bar {
    border-bottom: none;
  }
  ::v-deep .ant-tabs-nav {
    .ant-tabs-tab-active {
      color: #fff;
      background: var(--primary) !important;
    }
    .ant-tabs-tab {
      background: rgba(245, 245, 245, 1);
      height: 24px;
      line-height: 24px;
      border-radius: 12px;
      padding: 0px 8px;
      font-size: 12px;
      margin-right: 12px;
    }
    .ant-tabs-ink-bar {
      display: none !important;
    }
  }
  ::v-deep .ant-tabs-tab-prev-icon {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--primary40);
    color: #fff;
  }
  ::v-deep .ant-tabs-tab-next-icon {
    width: 21px;
    height: 21px;
    border-radius: 50%;
    background: var(--primary40);
    color: #fff;
  }
}
</style>
